<template>
  <div id="">
    <headerbox :headerTitle="'圈子发布'"></headerbox>
    <div class="headerSpan">
      <span @click="cancel">取消</span>
      <span @click="publishEvent">发表</span>
    </div>

    <div class="publishTxtarea">
      <textarea rows="8" placeholder="分享此刻的心情" v-model="circleArticle.content"></textarea>
      <div class="">
        <ul class="p10 imglist">
          <li v-for="circleImg in imgList" :key="circleImg.key">
            <img :src="imgUrlLink(circleImg)" alt="" width="100" height="100">
          </li>
        </ul>
        <div class="uploadImg">
          <img src="@/assets/playcircleImage/add_photo.png" alt="">
          <!-- <input type="file" name="" value=""> -->
          <uploadImg class="uploadIpt" @uploadImgEvent="uploadImgEvent"></uploadImg>
        </div>
      </div>
    </div>
    <!-- <div class="yourAddr mb10">
      <span>
        <img src="@/assets/playcircleImage/add_black.png" alt="" width="15">
        所在位置
      </span>
      <img src="@/assets/playcircleImage/arrow_right1.png" alt="" width="10">
    </div> -->
    <ul class="formList">
      <li>
        <img src="@/assets/playcircleImage/add_black.png" alt="" width="15">
        <span>所在位置</span>
        <input type="text" name="" v-model="classifyValue.addr" placeholder="所在位置">
        <!-- <img src="@/assets/playcircleImage/arrow_right1.png" alt="" width="10"> -->
      </li>
      <li @click="classify()">
        <span>选择类型</span>
        <input type="text" name="" readonly v-model="classifyValue.classifyName" placeholder="选择活动类型">
        <img src="@/assets/playcircleImage/arrow_right1.png" alt="" width="10">
      </li>
    </ul>
    <!-- 运动类型picker -->
    <mt-popup
      v-model="classifyVisible"
      position="bottom" style="width:100%;">
      <mt-picker :slots="classifySlots" :valueKey="'classifyName'" @change="onClassifyChange"></mt-picker>
    </mt-popup>
  </div>
</template>
<script>
import { getClassifyList,circleArticlePush } from '@/utils/ajaxRequest.js';
import {mapState,mapMutations} from 'vuex';
export default {
  name: "",
  data: () => ({
    circleArticle:{
      token:'',
      proType:'',
      content:'',
      showImg:'',
      addr:'',
    },
    imgList:[],     //上传图片集合
    classifyValue:{id:'',classifyName:''},    //活动类型--总
    classifyVisible:false,
    classifySlots:[{
      flex: 1,
      values: [{id:'',classifyName:''}],
      className: 'slot1',
      textAlign: 'center'
    }]
  }),
  components: {
    uploadImg:()=>import('@/components/uploadImg/uploadImg'),
  },
  computed: {
    ...mapState({
      mapValue:state=>state.mapStore.mapVal,
      matchData:state=>state.mapStore.matchData,
    })
  },
  methods: {
    ...mapMutations(['setMatchData']),
    // 选择活动类型
    classify() {
      this.classifyVisible = true;
    },
    onClassifyChange(picker,values) {
      console.log(values);
      this.classifyValue = values[0];
      this.circleArticle.proType = values[0].id;
    },
    // 图片地址拼接
    imgUrlLink(imgurl) {
      return this.$imgUrlLink(imgurl);
    },
    // 取消
    cancel() {
      this.$router.go(-1);
    },
    // 发布
    publishEvent() {
      console.log('发表');
      let self = this;
      self.circleArticle.showImg = self.imgList.toString();
      console.log(self.circleArticle.showImg);
      let circleParam = self.circleArticle;
      circleArticlePush(circleParam).then(res=>{
        console.log(res);
        if(res){
          self.messageBox.alert(res.data.msg).then(action=>{
            self.$router.go(-1);    //发布成功返回上一页
          });
        }
      })
    },
    // 上传图片事件
    uploadImgEvent(data) {
      console.log(data);
      this.imgList.push(data);

    },

  },
  mounted() {
    //do something after mounting vue instance
    let self = this;
    let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
    this.circleArticle.token = xlyd_loginInfo.token;
    // 获取分类
    getClassifyList().then(res=>{
      console.log(res);
      if(res){
        self.classifySlots[0].values = res.data.result;
      }
    })
  }
}
</script>
<style lang="scss" scoped>
.headerSpan{
  position: fixed;
  top: 0;
  left: 0; right: 0;
  z-index: 1000;
  @include flex;
  justify-content: space-between;
  height: 40px;
  color: white;
  padding: 0 10px;
  font-size: 12px;
}
.publishTxtarea{
  min-height: 50%;
  width: 100%;
  border-bottom: 1px solid $borderColor;
  padding: 10px 0;
  overflow: hidden;
  background: white;
  textarea{
    width: 98%;
    border:none;
    margin-left: 1%;
    resize:none
  }
}
.imglist{
  @include flex;
  flex-wrap: wrap;
  li{
    margin-right: 10px;
    margin-bottom: 10px;
  }
}
.uploadImg{
  position: relative;
  width: 100px;
  margin-left: 10px;
  img{
    width: 100%;
  }
  .uploadIpt{
    position: absolute;
    top: 0; left: 0;
    bottom: 0; right: 0;
    z-index: 2;
    width: 100%;
    opacity: 0;
  }
}
.yourAddr{
  height: 40px;
  line-height: 40px;
  @include flex;
  justify-content: space-between;
  padding: 0 10px;
  background: white;
}
</style>
